<template>
  <div class="k-w">
    <div>
      <ul class="k-filter-list k-clearfix">
        <li class="k-filter-item" :class="{current:item.id===query.dep}" v-for="item in depFilters" :key="item.id" @click="doFilteByDep(item.id)">{{item.text}}</li>
      </ul>
      <ul class="k-filter-list k-clearfix" v-show="query.dep!==0">
        <li class="k-filter-item" :class="{current:item.id===query.cate}" v-for="item in cateFilters" :key="item.id" @click="doFilteByCate(item.id)">{{item.text}}</li>
      </ul>
    </div>
    <div class="k-tool-bar" v-show="isNotIndexHomePage">
      <div class="k-btn small " @click="goBack">
        <&nbsp;返回 </div>
      </div>
      <router-view></router-view>
      <div class="k-tc" v-show="isNotIndexHomePage">
        <el-pagination ref="personalPagination" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChange" @current-change="currentChange"
          :current-page.sync="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total">
        </el-pagination>
      </div>
    </div>
</template>
<script>
  import {
    pagination,
    search,
    home
  } from '../../facility/mixin.js';
  import {
    mapState,
    mapGetters,
    mapMutations
  } from 'vuex'
  import {
    NS
  } from 'fac/constant'
  const NS_HOME = NS.HOME;
  const NS_SEARCH = NS.SEARCH;
  const NS_PERSONAL = NS.PERSONAL;
  const NS_PAGINATION = NS.PAGINATION;
  export default {
    name: NS_HOME,
    mixins: [pagination, search, home],
    data() {
      return {}
    },
    computed: {
      ...mapState(NS_SEARCH, ['search']),
      ...mapState(NS_HOME, {
        depFilters: (state) => state.filter.dep,
        cateFilters: (state) => state.filter.cate
      }),
      ...mapState(NS_PAGINATION, {
        pageSize: (state) => state.pageSizes[0],
        pageSizes: 'pageSizes',
        total: 'total'
      }),
    },
    methods: {
      ...mapMutations(NS_HOME, ['setFilters', 'switchFilter']),
      ...mapMutations(NS_PAGINATION, [
        'sizeChange',
        'currentChange',  
        'refreshPagination'
      ]),

      //通过部门获取分类过滤器列表
      getCateFilterList(fCur) {

      },

      //变换路由
      routeChange() {
        let query = Object.assign({}, this.$route.query, this.query);
        this.$router.replace({
          query
        });
      },

      //部门过滤
      doFilteByDep(fCur) {
        this.query.cate = 0;
        this.switchFilter({
          fType: 'dep',
          fCur
        });
        this.getCateFilterList(fCur);
        this.routeChange();
      },
      //分类过滤
      doFilteByCate(fCur) {
        this.switchFilter({
          fType: 'cate',
          fCur
        });
        this.routeChange();
      },

      //返回按钮
      goBack() {
        this.$router.push({
          name: NS_HOME
        })
      }
    },
    mounted() {
      //首页过滤器初入页面识别
      let route = this.$route.query;
      this.setFilters({
        dep: route.dep || '0',
        cate: route.cate || '0'
      });
      this.refreshPagination(1);
    }
  }

</script>
